<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="registerForm.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="registerForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="registerForm.confirmPassword"
        type="confirmPassword"
        name="密码"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请确认密码' }]"
      />

      <van-field
        v-model="registerForm.tel"
        type="number"
        name="手机号码"
        label="手机号码"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />

      <van-field
        v-model="registerForm.addr"
        name="地址"
        label="地址"
        placeholder="地址"
        :rules="[{ required: true, message: '请填写你的地址' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { registerRequest } from "../utils/api";
export default {
  name: "RegisterForm",
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        tel: "",
        addr: ""
      }
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      registerRequest("/register", this.registerForm).then(resp => {
        if (resp) {
          alert(JSON.stringify(resp));
        }
      });
    }
  }
};
</script>

<style>
</style>